<!-- 个人中心 -->
<template>
	<view class="container">
		<tui-navigation-bar :isOpacity="true" @init="initNavigation" @change="opacityChange" :scrollTop="scrollTop" backgroundColor="#5677fc" color="#333">
			 <view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
			   <tui-icon name="arrowleft" color="#fff" @click="back"></tui-icon>
			 </view>
		</tui-navigation-bar>
		
		<scroll-view :style=" 'height: '+swiperHeight+''" scroll-y >
			<view class="me-main">
				<!-- <view class="qr-box" @click="qrCode" v-if="vuex_user.isAgent == '1'">
					<u-icon name="erweima" custom-prefix="iconfont"></u-icon>
				</view> -->
				<view class="infoa-box">
					<view class="avatar-box" @click="editBtn">
						<u-image width="130" height="130" shape="circle" :src="vuex_user.avatar"></u-image>
					</view>
					<view class="right-box">
						<view class="nickname-box">
							<view class="vip-tag-box">
								<view class="nickname">{{vuex_user.nickName}}</view>
								<view class="vip-tag" v-if="vuex_user.isVip" @click="toVip">VIP</view>
								<view class="vip-tag-no" v-else @click="toVip">VIP</view>
							</view>
							<view class="status-tag">单身</view>
						</view>
						<view class="main-btn" @click="editBtn">
							<view>主页</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
				<view class="num-box">
					<view class="num-tab">
						<view>{{vuex_user.heartNum}}</view>
						<view class="num-text">关注</view>
					</view>
					<view class="num-tab">
						<view>{{vuex_user.fansNum}}</view>
						<view class="num-text">粉丝</view>
					</view>
					<view class="num-tab" @click="fangke">
						<view v-if="vuex_user.visitNum > 99">99+</view>
						<view v-else>{{vuex_user.visitNum}}</view>
						<view class="num-text">访客</view>
						<view v-if="vuex_user.visitRead == '1'" class="read-dot"></view>
					</view>
				</view>
			</view>
			<view class="main-box">
				
				<!-- <view class="vip-tab-box" @click="toVip" v-if="chat_flag == 1">
					<view>开通会员</view>
					<u-icon name="arrow-right"></u-icon>
				</view> -->
				
				<view class="main-tab-box">
					<!-- <view class="main-tab" @click="openCash" v-if="vuex_user.isAuth == '1'">
						<view class="main-tab-text">
							<view>我的钱包</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
						<view class="amount-box">
							<view>200</view>
							<view class="cash-btn">立即提现</view>
						</view>
					</view> -->
					<view class="main-tab" @click="donTai">
						<view class="main-tab-text">
							<view>我的动态</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
						<view>{{vuex_user.dynamicNum}}</view>
					</view>
				</view>
				
				<view class="main-tab-box">
					<view class="main-tab" @click="openCoin" v-if="vuex_user.isAuth == '1'">
						<view class="main-tab-text">
							<view>我的趣豆</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
						<view class="amount-box">
							<view>{{vuex_amount}}</view>
							<!-- <view class="cash-btn">0趣豆可提现</view> -->
						</view>
					</view>
					<view class="main-tab" @click="openIdCard" v-if="vuex_user.isAuth == '1'">
						<view class="main-tab-text">
							<view>实名认证</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
						<view v-if="vuex_user.idCardStatus == '1'">已认证</view>
						<view v-else>未认证</view>
					</view>
				</view>
				
				<view class="task-box" v-if="vuex_user.isAuth == '1'">
					<view class="coin-title-box" @click="moreTask">
						<view class="task-title">每日免费领趣豆任务</view>
						<view class="more-btn">
							<view>更多</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<block v-for="(task, index) in taskList" :key="index">
						<block v-if="index < 3">
							<view class="card-box" v-if="'rate' == task.taskType">
								<view class="title">{{task.title}}</view>
								<view class="desc">{{task.taskDesc}}</view>
								<view>
									<u-button @click="pingjia(task)" type="success">去评价</u-button>
								</view>
							</view>
							<view class="card-box" v-if="'sign' == task.taskType">
								<view class="title">{{task.title}}</view>
								<view class="desc">{{task.taskDesc}}</view>
								<view>
									<u-button @click="doSign(task)" type="success">去签到</u-button>
								</view>
							</view>
							<view class="card-box" v-if="'share' == task.taskType">
								<view class="title">{{task.title}}</view>
								<view class="desc">{{task.taskDesc}}</view>
								<view>
									<u-button open-type="share" type="success">去邀请</u-button>
								</view>
							</view>
							<view class="card-box" v-if="'service' == task.taskType">
								<view class="title">{{task.title}}</view>
								<view class="desc">{{task.taskDesc}}</view>
								<view>
									<u-button @click="doOrder" type="primary">去下单</u-button>
								</view>
							</view>
						</block>
					</block>
					
				</view>
				
			</view>
		</scroll-view>
		
		
		<coin-popup></coin-popup>
		<cash-popup></cash-popup>
		<qr-popup></qr-popup>
		<qrcode-popup :msg="msg"></qrcode-popup>
		<user-phone></user-phone>
		<user-auth></user-auth>
	</view>
</template>

<script>
	import tuiNavigationBar from "@/components/thorui/tui-navigation-bar/tui-navigation-bar.vue"
	import qrcodePopup from "@/components/qrcode-popup/qrcode-popup";
	import {mapState} from 'vuex';
	export default {
		components: {
			tuiNavigationBar,
		},
		data() {
			return {
				userId: 0,
				user: {
					nickName: '未知',
					signName: 'TA很神秘，什么也没留下'
				},
				top: 0, //标题图标距离顶部距离
				opacity: 0,
				height: 0,
				scrollTop: 0.5,
				msg: '记得关注服务号避免下次找不到',
				taskList: [],
			}
		},
		computed: {
			...mapState(['vuex_amount','vuex_user','chat_flag','vuex_cash_amount']),
			swiperHeight: {
			  get() {
			    let that = this;
			    return ' calc( 100vh - 100rpx )';
			  },
			  set(v) {}
			},
		},
		created() {
			this.init();
			uni.$on('indexmine',this.init);
		},
		destroyed() {
			// 注销全局配置监听
			uni.$off('indexmine');
		},
		methods: {
			init() {
				this.getUserInfo();
				this.getAmount();
				this.getTaskList();
			},
			initNavigation(e) {
				this.height = e.height;
				this.opacity = e.opacity;
				this.top = e.top;
			},
			opacityChange(e) {
				this.opacity = e.opacity;
			},
			getUserInfo() {
				this.$u.get('/system/user/getMyInfo').then(res => {
					this.user = res.user;
					this.$store.commit('setUser', this.user);
					this.$store.commit('setNoticeNum', this.user.giveNewNum+this.user.commentNewNum);
				})
			},
			getAmount() {
				this.$u.get('/pay/userCoin/getAmount').then(res => {
					this.$store.commit('setAmount', res.data);
				});
			},
			getTaskList() {
				this.$u.get('/wq/task/list').then(res => {
					this.taskList = res.data;
				});
			},
			sumitTask(id) {
				this.$u.post('/wq/task/ok',{
					id: id,
				}).then(res => {
					this.taskList = res.data;
				});
			},
			getCash() {
				this.$u.get('/pay/coinCash/getCash').then(res => {
					this.$store.commit('setCashAmount', res.data);
				});
			},
			fangke() {
				this.judgeLogin(() => {
					this.$u.route({
						url: 'packgeMine/pages/index/fangke',
					});
				});
			},
			donTai() {
				this.judgeLogin(() => {
					this.$u.route({
						url: 'packgeMine/pages/me/hot',
					});
				});
			},
			gamePage() {
				this.judgeLogin(() => {
					this.$u.route({
						url: 'packgeMine/pages/me/game',
					});
				});
			},
			openIdCard() {
				this.judgeLogin((rs) => {
					if(rs.user.phonenumber == null || rs.user.phonenumber == ''){
						this.$store.commit('setPhone', true);
						return;
					}
					this.$u.route({
						url: 'pages/me/step/index',
						params: {
							my: 'true',
						}
					});
				});
			},
			openCoin() {
				this.judgeLogin(() => {
					this.$store.commit('setCoin', true);
				});
			},
			openCash() {
				this.judgeLogin((res) => {
					if(!res.user.wxOpenId){
						this.$store.commit('setQr', true);
						return;
					}
					this.$store.commit('setCash', true);
					//uni.$emit('cash', true);
				});
			},
			toVip() {
				this.judgeLogin(() => {
					this.$u.route({
						url: 'packgeMine/pages/me/vip',
					});
				});
			},
			qrCode() {
				this.judgeLogin(() => {
					this.$u.route({
						url: 'packgeMine/pages/me/qrcode',
					});
				});
			},
			editBtn() {
				this.judgeLogin(() => {
					this.$u.route({
						url: 'packgeMine/pages/me/edit',
					});
				});
			},
			moreTask() {
				this.$u.route({
					url: 'pages/me/step/task',
					params: {
						my: 'true',
					}
				});
			},
			doOrder() {
				this.$store.commit('setQr', true);
			},
			pingjia(e) {
				var that = this;
				var plugin = requirePlugin("wxacommentplugin");
				plugin.openComment({
				  success: (res)=>{
					if(res.errCode == 0){
						that.sumitTask(e.id);
					}
				  },
				  fail: (res) =>{
				    console.log('plugin.openComment fail', res)
				  }
				})
			},
			doSign(e) {
				this.judgeLogin(() => {
					this.sumitTask(e.id);
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: #faf1f1;
	}
	
	.me-main {
		background-image: linear-gradient(0deg, #FFF, #D0E6FE);
		padding: 15px;
		display: flex;
		padding-top: 50px;
		flex-direction: column;
		padding-bottom: 50px;
		padding-top: 200rpx;
	}
	.infoa-box {
		display: flex;
		align-items: center;
		flex: 1;
		margin-bottom: 15px;
	}
	.nickname {
		font-size: 34rpx;
		margin-right: 5px;
	}
	.right-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 1;
		padding-left: 15px;
	}
	.status-tag {
		background-color: antiquewhite;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 22rpx;
		border-radius: 20px;
		padding: 3px 10px;
		color: #19a6a6;
	}
	.avatar-box {
		padding: 6rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 100%;
	}
	.main-btn {
		display: flex;
		align-items: center;
		line-height: 50px;
		color: #8e8383;
	}
	.num-box {
		display: flex;
		align-items: center;
		margin: 10px 0;
	}
	.num-tab {
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-size: 36rpx;
		position: relative;
	}
	.num-text {
		font-size: 22rpx;
		color: #8e8383;
	}
	.main-box {
		background-color: #faf1f1;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		position: absolute;
		width: 100%;
		top: 520rpx;
		padding: 15px;
	}
	.main-tab-box {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}
	.vip-tab-box {
		display: flex;
		align-items: center;
		padding: 20px 15px;
		justify-content: space-between;
		margin-bottom: 15px;
		background-image: linear-gradient(180deg, #f9a470, #db854e);
		border-radius: 10px;
		color: #fff;
		font-weight: bold;
		font-size: 28rpx;
	}
	.main-tab {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		padding: 15px;
		border-radius: 10px;
		flex: 1;
		margin-right: 15px;
		color: #19a6a6;
		font-size: 26rpx;
	}
	.main-tab-box .main-tab:last-child{
		margin-right: 0;
	}
	.main-tab-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
		color: #363f3f;
		font-size: 28rpx;
		line-height: 10px;
	}
	.coin-tab {
		background-color: #fff;
		padding: 15px;
		border-radius: 10px;
	}
	.coin-title-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 15px;
	}
	.more-btn {
		display: flex;
		align-items: center;
		line-height: 10px;
		color: #19a6a6;
		font-size: 22rpx;
	}
	.vip-box {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}
	.amount-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.cash-btn {
		background-color: #d09e9e;
		color: #fff;
		padding: 3px 10px;
		font-size: 20rpx;
		border-radius: 20px;
	}
	.qingtong {
		margin-right: 30px;
		width: 35px;
		height: 35px;
	}
	.baiyin {
		margin-right: 30px;
		width: 25px;
		height: 25px;
	}
	.gold {
		width: 20px;
		height: 20px;
	}
	.vip-text {
		font-size: 24rpx;
		margin-left: 1px;
	}
	.up-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.up-btn {
		background-color: #4d9df4;
		padding: 3px 10px;
		color: #fff;
		font-size: 22rpx;
		border-radius: 20rpx;
	}
	.vip-text-box {
		display: flex;
		align-items: center;
	}
	.vip-text-tip {
		font-size: 22rpx;
		color: #eb8e8e;
		margin-left: 15px;
	}
	.vip-tag-box {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}
	.vip-tag {
		background-color: #ffd32f;
		padding: 3px 5px;
		border-radius: 3px;
		font-size: 18rpx;
		color: #fff;
	}
	.vip-tag-no {
		background-color: #d2e7fe;
		padding: 3px 5px;
		border-radius: 3px;
		font-size: 18rpx;
		color: #fff;
	}
	.qr-box {
		position: absolute;
		top: 100rpx;
		font-size: 50rpx;
		color: #0e0f0f;
	}
	.read-dot {
		background-color: #e02f2f;
		width: 20rpx;
		height: 20rpx;
		position: absolute;
		top: 4rpx;
		right: 60rpx;
		border-radius: 100%;
	}
	
	.task-box {
		background-color: #fff;
		padding: 15px;
		border-radius: 10px;
		
		.task-title {
			border-left: 3px solid #ddd;
			padding-left: 5px;
			line-height: 12px;
		}
		
		.card-box {
			padding-top: 15px;
			
			.title {
				font-size: 28rpx;
				font-weight: bolder;
			}
			
			.desc {
				font-size: 28rpx;
				margin: 10px 0;
			}
		}
	}
	
</style>
